<template>
    <div class="like">
        <div class="likeTop">
            <div class="play"><van-button size="mini" type="primary"
                icon="play-circle-o">全部播放</van-button>
            </div>
            <transition name="rightBtn">
                <div class="rightBtn" v-show="management">
                    <div>
                        <div><van-checkbox @click="SelectAll" v-model="selectAll">全选</van-checkbox></div>
                        <div @click="prepareDel">删除</div>
                        <div v-if="!$route.query.link" @click="jump">添加到</div>
                        <div v-if="$route.query.link" @click="jump">移动到</div>
                    </div>
                </div>
            </transition>
            <div @click="management = !management" class="guanli"><van-button type="primary" size="mini">{{ management?"取消":"管理" }}</van-button></div>
        </div>
        <div class="likeLit">
            <div v-for="(item,index) in list" :key="index" class="likeItem">
                <div class="likeInfo">
                    <div class="sel"><van-checkbox v-if="management" @click="SelectOne" v-model="item.isSelect"></van-checkbox></div>
                    <div class="imgBox">
                        <img :src="item.pic" alt="">
                        <van-icon name="like" />
                    </div>
                    <div @click="add(item)" class="musicInfo">
                        <div>{{ item.name }}</div>
                        <div>{{ item.artist }}</div>
                    </div>
                </div>
                <div class="operation">
                    <van-icon @click.stop="more(item)" name="ellipsis" />
                </div>
            </div>
        </div>
        <van-share-sheet v-model="showShare" :options="options" @select="selectOptions"/>
    </div>
</template>
  
<script>
import { getLikeMusicList } from '@/api/songLink'
import { mapMutations } from 'vuex'
import { delLike } from '@/api/songLink.js'
export default {
    name:"Like",
    data(){
        return {
            list:[],
            management:false,
            selectAll:false,
            showShare: false,
            Rid:[],
            options: [
                {
                    name: this.$route.query.link?"从歌单移除":"取消喜欢",
                    icon: 'https://img01.yzcdn.cn/vant/custom-icon-fire.png',
                },
                {
                    name: '添加到',
                    icon: 'https://img01.yzcdn.cn/vant/custom-icon-light.png',
                },
            ],
        }
    },
    created(){
        this.getList();
    },
    methods:{
        ...mapMutations({addMusic:'addAudio'}),
        getList(){      //获取喜欢的音乐列表
            getLikeMusicList({
                type:this.$route.query.type,
                limit:20,
                page:1,
                link:this.$route.query.link?this.$route.query.link:undefined,

            }).then(res=>{
                res.data.forEach(current=>{
                    current.isSelect = false;
                })
                this.list = res.data;
            })
        },
        add(item){
            this.addMusic(item);
        },
        more(item){
            this.Rid = item.rid;
            this.showShare = true;
        },
        selectOptions(option){
            if(option.name=='取消喜欢'||option.name=='从歌单移除'){
                this.del([this.Rid])
            }else if(option.name=='添加到'){
                this.addSong();
            }
        },
        SelectAll(){
            this.list.forEach(current=>{
                current.isSelect = this.selectAll;
            })
        },
        SelectOne(){
            let all = true;
            this.list.forEach(current=>{
                if(!current.isSelect){
                    all = false;
                }
            })
            this.selectAll = all;
        },
        prepareDel(){
            this.$dialog.alert({
                showCancelButton:true,
                title:'删除',
                message: this.$route.query.link?"从歌单中删除？":'确认删除？',
            }).then(res=>{
                let arr = [];
                this.list.forEach(current=>{
                    if(current.isSelect){
                        arr.push(current.rid)
                    }
                })
                if(arr.length==0){
                    return this.$toast.fail('请选择歌曲!')
                }
                this.del(arr);
                this.management = false;
            }).catch(()=>{
                this.$toast.fail('用户取消!');
                this.management = false;
            });
        },
        del(list){
            delLike({
                rid:list,
                type:this.$route.query.type,
                id:this.$route.query.link?this.$route.query.link:undefined
            }).then(res=>{
                if(res.code==200){
                    this.$toast.success('取消成功!');
                    this.showShare = false;
                    this.getList();
                }
            })
        },
        addSong(){      //添加歌曲到歌单
        this.$router.push({
            path:"/songSheet",
            query:{rid:[this.Rid]}
        })
    },
    jump(){
        this.Rid = []
        this.list.forEach(current=>{
            if(current.isSelect){
                this.Rid.push(current.rid)
            }
        })
        if(this.Rid.length == 0){
            return this.$toast.fail('请选择歌曲!')
        }
        this.$router.push({
            path:"/songSheet",
            query:{rid:this.Rid,oldId:Number.parseInt(this.$route.query.link)}
        })
    },
    }
}
</script>
  
<style lang="less" scoped>
    .like{
        width: 100%;
        .likeTop{
            position: relative;
            display: flex;
            align-items: center;
            height: 50px;
            background: white;
            border-radius: 3px;
            justify-content: right;
            width: calc(~"100% - 10px");
            margin: 5px auto;
            padding: 0px 5px;
            text-align: center;
            line-height: 50px;
            box-sizing: border-box;
            .play{
                position: absolute;
                left: 5px;
                height: 100%;
                width: 90px;
            }
            .rightBtn{
                overflow: hidden;
                width: 180px;
                &>div{
                    display: flex;
                    width: 180px;
                    &>div{
                        margin: 0 10px;
                        justify-content: center;
                        display: flex;
                        align-items: center;
                    }
                }
            }
            .guanli{
                height: 100%;
                width: 60px;
                color: #494949;
            }
        }
        .likeLit{
            padding: 10px 5px;
            .likeItem{
                height: 50px;
                background: white;
                border-radius: 3px;
                overflow: hidden;
                display: flex;
                margin-bottom: 6px;
                padding: 5px 5px;
                &>div{
                    width: 40%;
                }
                .likeInfo{
                    position: relative;
                    display: flex;
                    width: 60%;
                    &>div{
                        float: left;
                    }
                    .sel{
                        position: absolute;
                        left: -5px;
                        top: -5px;
                        z-index: 100;
                    }
                    .imgBox{
                        position: relative;
                        display: flex;
                        align-items: center;
                        width: 50px;
                        img{
                            width: 100%;
                            border-radius: 5px;
                        }
                        i{
                            position: absolute;
                            bottom: 6px;
                            right: 2px;
                            color: red;
                        }
                    }
                    .musicInfo{
                        width: 100%;
                        overflow: hidden;
                        display: flex;
                        flex-direction: column;
                        justify-content:space-around;
                        div{
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            width: 100%;
                            padding-left: 10px;
                            &:nth-child(2){
                                color: #727272;
                            }
                        }
                    }
                }
                .operation{
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    font-size: 22px;
                    color: #727272;
                    i{
                        margin-right: 10px;
                    }
                }
            }
        }
    }

.rightBtn-enter-active,
.rightBtn-leave-active {
    transition: all .5s;
}
.rightBtn-leave-to {
    width: 0px !important;
}
.rightBtn-enter {
    width: 180px !important;
}

</style>